<template>
	<view class="spread flex" :class="{'box-spread': showFlag}">
		<view class="spread-item flex flex-col items-center" v-for="item in PositionDictionary" :key="item.label"
			:style="item.style">
			<view class="flex flex-col items-center" style="gap: 8rpx">
				<text class="spread-up">{{item.up}}</text>
				<template v-if="isAch == 1">
					<view style="position: relative">
						<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
						<image :src="item.back" mode="widthFix" v-else></image>
					</view>
				</template>
				<template v-else>
					<view style="position: relative">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">{{item.name}}</text>
					</view>
				</template>
				<text class="spread-label flex justify-center">{{item.label}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const PositionDictionary = ref([{
			up: "10",
			name: "12宫",
			label: "魔蝎",
			style: {
				width: '100%'
			}
		},
		{
			up: "11",
			name: "11宫",
			label: "水瓶",
			style: {
				width: '50%',
				'align-items': 'flex-end',
				'padding': '0 50rpx 0 0',
				'transform': 'translateY(-60%)'
			}
		},
		{
			up: " 9 ",
			name: "1宫",
			label: "射手",
			style: {
				width: '50%',
				'align-items': 'flex-start',
				'padding': '0 0 0 50rpx',
				'transform': 'translateY(-60%)'
			}
		},
		{
			up: "12",
			name: "10宫",
			label: "双鱼",
			style: {
				width: '50%',
				'align-items': 'flex-end',
				'padding': '0 140rpx 0 0',
				'transform': 'translateY(calc(-100% * 2 + 80%))'
			}
		},
		{
			up: " 8 ",
			name: "2宫",
			label: "天蝎",
			style: {
				width: '50%',
				'align-items': 'flex-start',
				'padding': '0 0 0 140rpx',
				'transform': 'translateY(calc(-100% * 2 + 80%))'
			}
		},
		{
			up: " 1 ",
			name: "9宫",
			label: "白羊",
			style: {
				width: 'calc((100% - 460rpx) / 2)',
				'align-items': 'flex-end',
				'transform': 'translateY(calc(-100% * 3 + 80% + 40%))'
			}
		},
		{
			up: "切牌",
			name: "13宫",
			label: "蛇夫",
			style: {
				width: '460rpx',
				'transform': 'translateY(calc(-100% * 3 + 80% + 40%))'
			}
		},
		{
			up: " 7 ",
			name: "3宫",
			label: "天秤",
			style: {
				width: 'calc((100% - 460rpx) / 2)',
				'align-items': 'flex-start',
				'transform': 'translateY(calc(-100% * 3 + 80% + 40%))'
			}
		},
		{
			up: " 2 ",
			name: "8宫",
			label: "金牛",
			style: {
				width: '50%',
				'align-items': 'flex-end',
				'padding': '0 140rpx 0 0',
				'transform': 'translateY(calc(-100% * 3 + 80%))'
			}
		},
		{
			up: " 6 ",
			name: "4宫",
			label: "室女",
			style: {
				width: '50%',
				'align-items': 'flex-start',
				'padding': '0 0 0 140rpx',
				'transform': 'translateY(calc(-100% * 3 + 80%))'
			}
		},
		{
			up: " 3 ",
			name: "7宫",
			label: "双子",
			style: {
				width: '50%',
				'align-items': 'flex-end',
				'padding': '0 50rpx 0 0',
				'transform': 'translateY(calc(-100% * 4 + 80% + 40%))'
			}
		},
		{
			up: " 5 ",
			name: "5宫",
			label: "狮子",
			style: {
				width: '50%',
				'align-items': 'flex-start',
				'padding': '0 0 0 50rpx',
				'transform': 'translateY(calc(-100% * 4 + 80% + 40%))'
			}
		},
		{
			up: " 4 ",
			name: "6宫",
			label: "巨蟹",
			style: {
				width: '100%',
				'transform': 'translateY(calc(-100% * 4 + 60%))'
			}
		}
	])
	onMounted(() => {
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		PositionDictionary.value.map((item, idx) => {
			item.dir = cardList.value[idx].dir
			item.front = cardList.value[idx].tarot.front
			item.back = cardList.value[idx].tarot.back
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		height: 940rpx;
		padding: 30rpx 0;
		flex-wrap: wrap;
	}

	.spread-item {
		position: relative;
		box-sizing: border-box;
	}

	.spread-label {
		align-self: center;
		font-size: 28rpx;
	}
</style>